<template>
  <div id="app">
    <!-- 一个标题 -->
    <!-- <g-form :form="form" :rules="rules" ref="form">
      <g-form-item label="账号" prop="name">
        <g-input type="text" icon="icon-wo" placeholder="请输入用户名" :clearable="true" v-model="form.name"></g-input>
      </g-form-item>
      <g-form-item label="验证码" prop="code">
        <g-input type="text" :width="185" placeholder="请输入验证码" :clearable="true" v-model="form.code"></g-input>
        <g-button>获取验证码</g-button>
      </g-form-item>
      <g-form-item label="设置密码" prop="pass">
        <g-input type="password" icon="icon-weibiaoti-" placeholder="请输入密码" :clearable="true" :seepassword="true" v-model="form.pass"></g-input>
      </g-form-item>
      <g-form-item label="确认密码" prop="passAgin">
        <g-input type="password" icon="icon-weibiaoti-" placeholder="请再次输入密码" :clearable="true" :seepassword="true" v-model="form.passAgin"></g-input>
      </g-form-item>
      <g-button @click="submit('form')">提交表单</g-button>
    </g-form> -->
    <!-- 两个标题，多行文本框 -->
    <!-- <g-form :form="form" ref="form" :align="'top'">
      <g-form-item title="真实姓名" label="Name" prop="name">
        <g-input type="text" v-model="form.name" :width="790"></g-input>
      </g-form-item>
      <g-form-item title="联系手机" label="Phone" prop="phone">
        <g-input type="text" v-model="form.phone" :width="790"></g-input>
      </g-form-item>
      <g-form-item title="联系邮箱" label="E-mail" prop="email">
        <g-input type="text" v-model="form.email" :width="790"></g-input>
      </g-form-item>
      <g-form-item title="计划在SoftLink分享什么课程？" label="What kind of courses are planned？" prop="share">
        <g-input type="text" v-model="form.share" :textarea="true" :width="1200" :height="140"></g-input>
      </g-form-item>
      <g-form-item title="个人简介" label="Individual Resume" prop="introduce">
        <g-input type="text" placeholder="您可以填写以下内容：1.您的教育背景和教学经验 2.您目前所从事的行业和职务  3.您的课程链接或主页" v-model="form.introduce" :textarea="true" :width="1200" :height="140"></g-input>
      </g-form-item>
      <g-button @click="submit('form')">提交</g-button>
    </g-form> -->

    <!-- 通知调用按钮 -->
    <!-- <button @click="notiafic">通知</button> -->

    <!-- tabs -->
    <tabs :value="tabValue" @change="handleChange">
      <!-- <tab :label="tab" :index="tab" v-for="tab in stats" :key="tab" /> -->
      <tab label="1" index="1">
        <span>11 {{inputName}}</span>
      </tab>
      <tab label="2" index='2'></tab>
      <tab label="3" index='3'></tab>
    </tabs>

    <input
      type="text"
      class="add-input"
      autofocus="autofocus"
      placeholder="接下去要做什么？"
      v-model="inputName"
    >
  </div>
</template>

<script>
import gForm from "@/components/form/form/form"
import gFormItem from "@/components/form/form/form-item"
import gInput from "@/components/input/input"
import gButton from "@/components/button/button"

export default {
  name: "App",
  components: {
    gForm,
    gFormItem,
    gInput,
    gButton
  },
  data() {
    let name = (rule, value, callback) => {
      if (/1[3456789](\d){9}/.test(value)) {
        callback()
        this.lodinStatus = "phone"
      } else if (/.@./.test(value)) {
        callback()
        this.lodinStatus = "email"
      } else {
        callback(new Error("手机号或邮箱格式不正确"))
      }
    }
    let code = (rule, value, callback) => {
      if (/(\d){6}/.test(value)) {
        callback()
        return
      }
      callback(new Error("验证码格式不正确"))
    }
    let pass = (rule, value, callback) => {
      if (/(\d){6,16}/.test(value)) {
        if (this.form.passAgin) {
          this.$refs.form.validateField("passAgin")
        }
        callback()
        return
      }
      callback(new Error("密码格式不正确"))
    }
    let passAgin = (rule, value, callback) => {
      if (this.form.pass && this.form.pass === value) {
        callback()
        return
      }
      callback(new Error("两次密码不一致"))
    }
    return {
      inputName: '',
      tabValue: "1",
      form: {
        name: "",
        pass: "",
        code: "",
        passAgin: ""
      },
      rules: {
        name: {
          validator: name
        },
        code: [
          {
            validator: code
          }
        ],
        pass: [
          {
            validator: pass
          }
        ],
        passAgin: [
          {
            validator: passAgin
          }
        ]
      },
      lodinStatus: ""
    }
  },
  methods: {
    submit(form) {
      this.$refs[form].verification((verif, formItem) => {
        console.log(verif, formItem)
      })
    },
    notiafic() {
      this.$notice({
        title: "测试2",
        content: "测试内容2"
      })
    },
    handleChange(index) {
      this.tabValue = index
    }
  }
}
</script>

<style>
</style>
